<!--
 * @Author: your name
 * @Date: 2021-01-30 10:48:49
 * @LastEditTime: 2021-01-30 16:40:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \zimeigui-vite2-vue3\src\layouts\components\AppMain.vue
-->
<template>
    <div class="app-main" :class="[store.state.isMobile ? 'mobile' : '']">
        <el-scrollbar height="100%">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
                <el-breadcrumb-item :to="{ path: item.path }" v-for="(item, index) in state.routerList" :key="index">{{
                    item.meta.title
                }}</el-breadcrumb-item>
            </el-breadcrumb>
            <transition>
                <router-view></router-view>
            </transition>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    name: "AppMain",
};
</script>
<script setup>
import { onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
const state = reactive({
    routerList: [],
});
const route = useRoute();
const store = useStore();
onMounted(() => {
    state.routerList = route.matched;
    console.log(store.state.isMobile, "appMain");
});
watch(
    () => {
        return route.path;
    },
    (oldValue, newValue) => {
        state.routerList = route.matched;
    }
);
</script>

<style lang="scss" scoped>
.app-main {
    width: 100%;
    height: 100%;
    color: #333;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 70px 10px 10px calc(150px + 30px);
    // overflow: auto; // 页面开启全屏loading时必须得禁止滚动

    &.mobile {
        padding: 90px 10px 10px 100px;
    }
}

/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    // transition: opacity 0.5s ease;
    transition: all 0.3s;
}

.v-enter-from,
.v-leave-to {
    opacity: 0.5;
    transform: translateX(100%);
}
</style>
